<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>sign in</title>
    <link href="../static/default/bootstrap/css/bootstrap.min.css" rel="stylesheet"
          th:href="@{default/bootstrap/css/bootstrap.min.css}"/>
    <style type="text/css">
        html,
        body {
            height: 100%;
        }

        body {
            display: -ms-flexbox;
            display: -webkit-box;
            display: flex;
            -ms-flex-align: center;
            -ms-flex-pack: center;
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: center;
            justify-content: center;
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }

        .system-title {
            line-height: 40px;
            height: 40px;
            font-size: 24px;
        }

        .system-title img {
            width: 35px;
            margin-right: 10px;
        }

        .system-title * {
            vertical-align: middle;
        }

        .form-signin {
            width: 420px;
            padding: 15px;
            margin: 0 auto;
        }

        .form-signin .checkbox {
            font-weight: 400;
        }

        .form-signin .form-control {
            position: relative;
            box-sizing: border-box;
            height: auto;
            padding: 10px;
            font-size: 16px;
        }

        .form-signin .form-control:focus {
            z-index: 2;
        }

        .form-signin input[id="username"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .message-text {
            color: #000;
            font-size: 16px;
            margin: 14px 0;
        }

        .message-text.error-text {
            color: red;
        }

        .container {
            background: url([[${loginBackground}]]) no-repeat left top;
        }

        .login-card {
            position: absolute;
            right: 10%;
        }
    </style>
</head>

<body class="text-center container">
<div class="card login-card">
    <div class="card-body">
        <form action="login" class="form-signin" id="signInForm" method="post">
            <div class="system-title">[[${clientName}]]
            </div>
            <h1 class="h3 mb-3 font-weight-normal message-text"
                th:classappend="${param.error==null ? '' : 'error-text'}"
                th:text="${param.error==null ? '欢迎登录' : '用户名或密码不正确！'}"></h1>
            <label class="sr-only" for="username">用户账号</label>
            <input autofocus class="form-control" id="username" name="username" placeholder="请输入用户账号" required>
            <label class="sr-only" for="inputPassword">账号密码</label>
            <input class="form-control" id="inputPassword" name="password" placeholder="请输入账号密码" required
                   type="password">
            <div th:if="${session.get('settings.client.require-captcha')}">
                <label class="sr-only" for="inputPassword">验证码</label>
                <input class="form-control" id="code" name="code" placeholder="请输入验证码" required>
                <img id="imageCode" onclick="getImageCode()">
            </div>
            <input name="type" th:value="password" type="hidden">
            <div class="checkbox mb-3">
                <label>
                    <input id="remember-me" name="remember-me" type="checkbox" value="true"> 记住账号
                </label>
            </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">登 录</button>
        </form>
    </div>
</div>
<script src="./static/default/js/jquery-3.3.1.min.js" th:src="@{default/js/jquery-3.3.1.min.js}"></script>
<script src="./static/default/bootstrap/js/bootstrap.min.js" th:src="@{default/bootstrap/js/bootstrap.min.js}"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    $(document).ready(function () {
        $("#signInForm").on("submit", function () {
            $(this).parents("#signInForm").submit();
        })
    });

    /*]]>*/

    getImageCode();

    function getImageCode() {
        $.ajax({
            type: 'GET',
            url: 'oauth2/captcha',
            dataType: 'json',
            success: function (data) {
                if (data && data.data) {
                    $("#imageCode").attr('src', data.data);
                }
            }
        });
    };
</script>

</body>
</html>